<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/style/splb.css"/>
		<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/swiper.min.css"/>
		<script src="../js/zepto.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/touch.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="../js/mobile.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="../bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/zepto.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/touch.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/iscroll.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/iscroll-probe.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function(){
				var l = document.getElementById("tiao").offsetWidth
			}
		</script>
	</head>
	<body>
		<div id="big">
			<header>
				<div>
					<a href="首页.html" class="glyphicon glyphicon-menu-left"></a>
				</div>
				<div>
					<span class="glyphicon glyphicon-search"></span>
					<input type="text" id="searchInput"/>
				</div>
				<div>
					<a href="购物车.html" class="glyphicon glyphicon-shopping-cart"></a> | 
					<a href="#">北京</a>
				</div>
			</header>
			
			<div id="option" class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide slide active1">
						<img src="../img/6.png"/><br />
						<span>母婴玩具</span>
					</div>
					<div class="swiper-slide slide">
						<img src="../img/10.png"/><br />
						<span>休闲零食</span>
					</div>
					<div class="swiper-slide slide">
						<img src="../img/1.png"/><br />
						<span>酒水乳饮</span>
					</div>
					<div class="swiper-slide slide">
						<img src="../img/7.png"/><br />
						<span>粮油副食</span>
					</div>
					<div class="swiper-slide slide">
						<img src="../img/3.png"/><br />
						<span>洗护美妆</span>
					</div>
					
					<div class="swiper-slide slide">
						<img src="../img/4.png"/><br />
						<span>家具用品</span>
					</div>
					<div class="swiper-slide slide">
						<img src="../img/9.png"/><br />
						<span>纸品家清</span>
					</div>
					<div class="swiper-slide slide">
						<img src="../img/2.png"/><br />
						<span>家用电器</span>
					</div>
					<div class="swiper-slide slide">
						<img src="../img/5.png"/><br />
						<span>进口食品</span>
					</div>
					<div class="swiper-slide slide">
						<img src="../img/8.png"/><br />
						<span>出游季</span>
					</div>
					<div id="tiao"></div>
				</div>
				
			</div>
			
			<main>
				<div>
					<ul id="list">
						
						
					</ul>
				</div>
			</main>
		</div>
	
	
	
	
	
	<script>
		(function(doc, win){
			l = document.getElementById("tiao").offsetWidth
	        var docEl = doc.documentElement,
	            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	            recalc = function(){
	                var clientWidth = docEl.clientWidth;
	                if(!clientWidth) return;
	                docEl.style.fontSize = 100 * (clientWidth / 330) + 'px';
	            };
	        if(!doc.addEventListener) return;
	        win.addEventListener(resizeEvt, recalc, false);
	        doc.addEventListener('DOMContentLoaded', recalc, false);
	    })(document, window);
	    function n (a){
	    	var num = parseInt(a);
	    	var str = "";
	    	if(num == 0){
	    		str = "muying"
	    	}else if(num == 1){
	    		str = "lingshi"
	    	}else if(num == 2){
	    		str = "jiushui"
	    	}else if(num == 3){
	    		str = "liangyou"
	    	}else if(num == 4){
	    		str = "meirong"
	    	}else if(num == 5){
	    		str = "jingxuan"
	    	}else if(num == 6){
	    		str = "jiaqing"
	    	}else if(num == 7){
	    		str = "jiayong"
	    	}else if(num == 8){
	    		str = "shengxian"
	    	}else{
	    		str = "jiayong"
	    	}
	    	return str
	    }
	    var un = localStorage.getItem("name")
//	    var optionIscroll = new IScroll("#option",{
//	    	scrollY : false,
//	    	scrollX : true
//	    })
	    var so = false;
//	    var l = document.getElementById("tiao").offsetWidth;
	    
		var nnn = parseInt(localStorage.getItem("num"));
		console.log(document.getElementById("tiao").offsetWidth,document.getElementById("tiao").offsetHeight)
		var str = n(nnn)
		
		sli()
		var la = -200
		console.log(str)
		$(".slide").click(function(){
			
			nnn = $(this).index();
			localStorage.setItem("num",nnn)
			str = n(nnn);
			cli(nnn,str);
			l = document.getElementById("tiao").offsetWidth;
			console.log(l)
			$("#tiao").stop().animate({"left":nnn*l+"px"})
			$(this).addClass("active1")
			$(this).siblings().removeClass("active1")
			la = -200
		})
		
		function sli(){
			
			str = n(nnn);
			cli(nnn,str);
			console.log(l)
			
			$("#tiao").animate({"left":nnn*l+"px"})
			$(".slide").eq(nnn).addClass("active1")
			$(".slide").eq(nnn).siblings().removeClass("active1")
		}
		function lll(ind){
			
			console.log(ind)
		}
		var arr = [];
		var ooo = 0;
		function cli(nnn,str){
			
			var sss = "";
			var img = "";
			$.ajax({
				type:"post",
				url:"http://47.92.37.168/supermarket/data/get_commodity.php",
				async:true,
				data : {
					'start':0,
					'classify':str
				},
				success : function(data){
					arr = data
					console.log(arr)
					img = "http://47.92.37.168/supermarket/img/"+data.img;
					for(var a of data){
						
						sss+=`
							<li>
								<div>
									<img src="http://47.92.37.168/supermarket/img/${a.img}" class="i"/>
								</div>
								<p>
									${a.name}
								</p>
								<div>
									<p>
										<span>月销${a.count}件</span><br />
										<span>¥${a.price}</span>
									</p>
									<div>
										<button class="button">
											<span class="glyphicon glyphicon-shopping-cart"></span>
										</button>
									</div>
								</div>
							</li>
						`
					}
					
					$("#list").empty()
					$("#list").append(sss)
					
					var flag = false;
					myIscroll = new IScroll("main",{
						probeType : 3
					})
					myIscroll.on('scroll',function(){
						so = true
						if(this.y<=la){
							
							flag = true
						}
						console.log(flag)
					})
					myIscroll.on('scrollEnd',function(){
						so = false
						if(flag){
							xxx()
							la *= 2
							flag = false
						}else{
							console.log(2)
						}
					})
					$(".i").each(function(ind){
						
						$(this).on("touchend",function(e){
							if(so){
								
							}else{
								var id = arr[ind].id
								localStorage.setItem("id",id);
								location.href = "商品详情.html"
							}
						})
					})
					$(".button").each(function(ind){
						$(this).on("click",function(e){
							var id = arr[ind].id
							$.ajax({
								type:"get",
								url:"http://47.92.37.168/supermarket/data/my_commodity_car.php",
								async:true,
								dataType:"jsonp",
								jsonp:"callback",
								data : {
									'user_phone':un,
									'commodity_id':id,
									'count':1
								},
								success : function(data){
									console.log(data)
									$(".yuan").each(function(){
										$(this).remove()
									})
								}
							});
							var img = $(".i").eq(ind).attr("src")
							var le = e.clientX
							var to = e.clientY
							var div = $("<div class='yuan'><img src="+img+"><div>")
							
							div.css({"left":le+"px"})
							div.css({"top":to+"px"})
//							
							$("body").append(div)
							
							var l = $("header>div:nth-of-type(3)>a:first-child").offset().left
							var t = $("header>div:nth-of-type(3)>a:first-child").offset().top
							
							div.animate({"left":l+"px","top":t+"px","opacity":0},1000);
							
						})
					})
				}
			});
			
		}
		var flag = true;
		Zepto("#list").swipeRight(function(e){
//			console.log(e)
//			e.preventDefault()
			
			if(flag){
//				alert(1)
				if(nnn<=0){
					
				}else{
					nnn--
				}
				str = n(nnn);
				cli(nnn,str);
				$("#list>li").each(function(){
					$(this).animate({"opacity" : "0"})
				})
				$("#tiao").animate({"left":nnn*l+"px"})
				flag = false;
				$(".slide").eq(nnn).addClass("active1")
				$(".slide").eq(nnn).siblings().removeClass("active1")
			}else{
				flag = true
			}
		})
		Zepto("#list").swipeLeft(function(e){
//			console.log(e)
//			e.preventDefault()
			
			if(flag){
//				alert(1)
				if(nnn>=9){
					
				}else{
					nnn++
				}
				str = n(nnn);
				cli(nnn,str);
				$("#list>li").each(function(){
					$(this).animate({"opacity" : "0"})
				})
				$("#tiao").animate({"left":nnn*l+"px"})
				flag = false;
				$(".slide").eq(nnn).addClass("active1")
				$(".slide").eq(nnn).siblings().removeClass("active1")
			}else{
				flag = true
			}
		})
		function xxx (){
			ooo = 4;
			$.ajax({
				type:"post",
				url:"http://47.92.37.168/supermarket/data/get_commodity.php",
				async:true,
				data : {
					'start':ooo,
					'classify':str
				},
				success : function(d){
					flag = false
					var str = "";
					if(d != null){
						arr = arr.concat(d)
						console.log(arr)
						for(var a of d){
							str += `
								<li>
									<div>
										<img src="http://47.92.37.168/supermarket/img/${a.img}" class="i"/>
									</div>
									<p>
										${a.name}
									</p>
									<div>
										<p>
											<span>月销${a.count}件</span><br />
											<span>¥${a.price}</span>
										</p>
										<div>
											<button class="button">
												<span class="glyphicon glyphicon-shopping-cart"></span>
											</button>
										</div>
									</div>
								</li>
							`
						}
						$("#list").append(str)
						
						myIscroll = new IScroll("main",{
							probeType : 3
						})
						$(".i").each(function(ind){
							$(this).on("touchend",function(e){
								if(so){
									
								}else{
									var id = arr[ind].id
									localStorage.setItem("id",id);
									location.href = "商品详情.html"
								}
							})
						})
//						myIscroll.on('scroll',function(){
//							
//							console.log(this.y)
//							if(this.y<=-1000){
//								flag = true
//							}else{
//								flag = false
//							}
//						})
//						myIscroll.on('scrollEnd',function(){
//							if(flag){
//								xxx()
//								
//							}else{
//								
//							}
//						})
//						
						$(".button").each(function(ind){
							$(this).click(function(e){
								var id = arr[ind].id
								$.ajax({
									type:"get",
									url:"http://47.92.37.168/supermarket/data/my_commodity_car.php",
									async:true,
									dataType:"jsonp",
									jsonp:"callback",
									data : {
										'user_phone':un,
										'commodity_id':id,
										'count':1
									},
									success : function(data){
										console.log(data)
									}
								});
								var img = $(".i").eq(ind).attr("src")
								var le = e.clientX
								var to = e.clientY
								var div = $("<div class='yuan'><img src="+img+"><div>")
								
								div.css({"left":le+"px"})
								div.css({"top":to+"px"})
	//							
								$("body").append(div)
								
								var l = $("header>div:nth-of-type(3)>a:first-child").offset().left
								var t = $("header>div:nth-of-type(3)>a:first-child").offset().top
								
								div.animate({"left":l+"px","top":t+"px","opacity":0},3000);
								
							})
						})
					}
					
					
				}
			});
		}
		
	</script>
	</body>
</html>
